@charset "utf-8";
@import "common/reset";
@import "common/common";

.web{
    width: 100%;
    overflow: hidden;
    width: 100%;
    height: 100%;
    header {
        
        position: absolute;
    top: 0;
    left: 0;
    width: 100%;
        .left {
            width: r(123px);
            height: r(57px);
            border: r(2px) solid $color;
            border-radius: r(16px);
            text-align: center;
            margin-top: r(48px);
            margin-left: r(23px);
            a {
                vertical-align: middle;
                color: #000000;
                font-size: r(26px);
                padding-top: r(6px);
            }
        }
        .right {
            margin-top: r(54px);
            margin-right: r(24px);
            img{
                width: r(52px);
            }
            
        }
        .center {
            overflow: hidden;
            margin: 0 auto;
            h2 {
                font-size: r(26px);
                margin-top: r(62px);
                text-align: center;
            }
        }
    }
    section{
         position: absolute;
     top:r(115px);
     bottom: r(115px);
     overflow-y:scroll;
     width: 100%;
     height: 100%;
        .portrait{
            width: 95%;
            margin: 0 auto;
            img{
                float: left;
                width: r(170px);
                margin-top: r(20px);
                
            }
            .denglu{
                margin-top: r(34px);
                margin-left: r(26px);
                a{
                    font-size: r(30px);
                    color: black;
                }
                p{
                    font-size: r(26px);
                    color: #9d9d9d;
                    margin-top: r(37px);
                }
            }
            .p_right{
                font-size: r(46px);
                margin-top: r(56px);
            }
        }
        .wuping{
            width: 95%;
            margin: 0 auto;
            margin-top: r(28px);
            ul{
                margin-bottom: r(10px);
                li{
                    display: inline-block;
                    width: 27%;
                    height: r(160px);
                    background: #b2e0a0;
                    text-align: center;
                    .wujiaoxing{
                        width: r(84px);
                    }
                    .changfangxing{
                        width: r(138px);
                    }
                    &:nth-of-type(2){
                        margin-left: 7%;
                        margin-right: 7%;
                        background: #a0dce0;
                    }
                    &:last-of-type{
                        background: #e0b7a0;
                    }
                    img{
                        width: r(78px);
                        margin-top: r(20px);
                    }
                    p{
                        a{
                            font-size: r(26px);
                            color: black;
                        }
                    }
                }
            }
        }
        .tool{
            .classify{
                margin-top: r(19px);
                margin-left: r(30px);
                img{
                    width: r(60px);
                    vertical-align: middle;
                    margin-right: r(26px);
                }
                span{
                    font-size: r(30px);
                    vertical-align: middle;
                }
                .exercise{
                    height: r(58px);
                }
                .movie{
                    height: r(52px);
                }
            }
            .more{
                margin-top: r(26px);
                margin-right: r(21px);
                span{
                    font-size: r(23px);
                }
                i{
                    color: $color;
                    font-size: r(26px);
                }
            }
            .juli{
                margin-top: r(78px);
            }
        }
        .but{
            margin-top: r(60px);
            padding-bottom: 100px;
            a{
                background: $color;
                padding: r(24px) r(50px);
                vertical-align: middle;
                color: white;
                border-radius: r(50px);
                margin-left: r(74px);
                margin-right: r(80px);
                
            }
        }
    }
}

